<template>
  <div>
      
   <el-row>
        <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>基础信息</el-breadcrumb-item>
     <el-breadcrumb-item>员工信息</el-breadcrumb-item>
</el-breadcrumb>
   </el-row>
   <el-row>
      <el-form label-width="80px">

          <el-row>
              <el-col span="8">
              <el-form-item label="员工姓名">
                  <el-input v-model="query.emp_name"/>
              </el-form-item>
              </el-col>


               <el-col span="8">
              <el-form-item label="单位名称">
                  <el-select v-model="query.selectedDept">
                      <el-option v-for="dept in depts" :key="dept.dept_id" :label="dept.dept_name"
                       :value="dept.dept_id"
                       ></el-option>
                  </el-select>
              </el-form-item>
              </el-col>

              <el-col span="6" offset="2">
                  <el-button type="success" @click="initTable" >搜索</el-button>
              </el-col>
          </el-row>
          <el-row>
            
          </el-row>
      </el-form>
   </el-row>
   <el-row>
      <el-button-group>

           <el-button type="primary" @click="checkInHandle">入职</el-button>
            <el-button type="success">转职</el-button>
            <el-button type="info">离职</el-button>
            

      </el-button-group>
       <el-table :data="employees" border  stripe fit
          :header-cell-style="headerRowStyle"
       >
       <el-table-column label="编号" :width="80">
        <template slot-scope="scope">
           {{scope.$index+1}}
          </template>
       </el-table-column>
            <el-table-column prop="emp_name" label="员工姓名"/>
            <el-table-column prop="emp_dept.dept_name" label="部门"/>
              <el-table-column prop="emp_status" label="员工状态">
                <template slot-scope="scope">
                  {{scope.row.emp_status|toChineseStatus}}
                  </template>
              </el-table-column>
               <el-table-column prop="emp_id" label="操作">
                     <template slot-scope="scope">
                        <el-button type="success" @click="editHandle(scope.row)">修改</el-button>
                        <el-button type="plain" @click="changeHandle(scope.row)">转职</el-button>
                        <el-button type="danger" @click="quitHandle(scope.row)" >离职</el-button>
                     </template>
               </el-table-column>
       </el-table>
        <el-pagination
      :current-page="query.current"
      :page-sizes="[3, 5, 10]"
      :page-size="query.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="100"
      @current-change="currentHandle">
    </el-pagination>
   </el-row>
  <el-dialog :visible.sync="info.show" :title="info.title" >

       <el-form label-width="120px">
         <el-row>
             <el-col span="16" offset="4">
             <el-form-item label="员工姓名">
               <input type="hidden" :value="info.emp_id"/>
               <el-input v-model="info.emp_name"/>
         </el-form-item>
         </el-col>
         </el-row>
       
    <el-row>
        <el-col span="16" offset="4">
         <el-form-item label="所在部门" >
                  <el-select v-model="info.selectedDept" >
                 <el-option v-for="dept in depts" :key="dept.dept_id" :label="dept.dept_name"
                       :value="dept.dept_id"
                           ></el-option>
                </el-select>
                </el-form-item> 
             </el-col>
            </el-row>
         </el-form>

    <span  slot="footer" class="dialog-footer">

     <el-button type="success" @click="saveHandle">确定</el-button>
     <el-button type="info">取消</el-button>

    </span>
  </el-dialog>
  </div>


</template>

<script>
export default {
  data() {
    return {
      depts: [],
      query: {
        selectedDept: 1,
        emp_name: "",
        current: 1,
        pagesize: 5
      },
      info: {
        title: "员工入职",
        show: false,
        emp_id:-1,
        emp_name: "",
        selectedDept: 1
      },
      employees: []
    };
  },

  components: {},

  computed: {},

  mounted() {
    this.initSelect();
    this.initTable();
  },
  filters: {
    toChineseStatus(val) {
      return val == "in" ? "在职" : "离职";
    }
  },

  methods: {
    initSelect() {
      var _this = this;

      this.axios({
        url: "http://localhost:3000/dept/list",
        method: "get",
        dataType: "json"
      }).then(res => {
        _this.depts = res.data;
        console.log(_this.query.depts);
      });
    },
    initTable() {
      var _this = this;

      this.axios({
        url: "http://localhost:3000/emp/list",
        method: "get",
        dataType: "json",
        params: _this.query
      }).then(res => {
        _this.employees = res.data;
      });
    },
    headerRowStyle({ row, rowIndex }) {
      return {
        backgroundColor: "#92a997",
        color: "white",
        fontWeight: 900
      };
    },
    saveHandle() {
      var _this = this;
      this.axios({
        url: "http://localhost:3000/emp/save",
        method: "post",
        dataType: "json",
        data: _this.info
      }).then(res => {
        if (res.data.responseMsg) {
          var message ='';
          if(res.data.tip=='add'){
             message ='添加成功！'
          }else{
             message='修改成功！';
          }
          this.$message({
            message: message,
            type: "success",
            duration: 1000
          });

          _this.info.show = false;
        }
      });
    },
    checkInHandle(){
       this.info.show = true;
       this.info.title="员工入职"
       this.info.emp_id=-1;
       this.info.emp_name='';
       this.info.selectedDept=1;
      
    },
    
    editHandle(employee){
       this.info.show = true;
       this.info.title="员工信息修改";
        this.info.emp_name = employee.emp_name;
        this.info.selectedDept = employee.emp_dept.dept_id;
        this.info.emp_id = employee.emp_id;
      
        
    },
    changeHandle(employee) {
      var _this = this;
      this.axios({
        url: "http://localhost:3000/emp/change",
        method: "post",
        dataType: "json",
        data: employee
      }).then(res => {
        if (res.data.responseMsg) {
          var html =
            "<div>" +
            employee.emp_name +
            "-" +
            employee.emp_dept.dept_name +
            "</div>" +
            "<div>转职成功！</div>";

          _this.$alert(html, "提示", {
            dangerouslyUseHTMLString: true
          });
        }
      });
    },
    quitHandle(employee) {
      var _this = this;

      this.$confirm("你是否真的要离职？", "提示", {}).then(() => {
        _this.$alert("你再好好想想！");
      });

      console.log(employee);
    },
    currentHandle(current) {
      this.query.current = current;
      this.initTable();
    }
  }
};
</script>
<style scoped>
.el-select {
  width: 100%;
}

.el-row {
  margin-top: 15px;
}

.el-button {
  width: 80px;
}
</style>